<template>
  <div class="account_wrapper">
    <div>
      <AccountCard title="公众号管理"/>
      <div style="margin-bottom: 35px">
        <div class="card_td">
          <span>01</span>
          <span>微信账号sdghsg</span>
          <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除当前公众号吗？"
              @confirm="removeWx"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
        <div class="card_td">
          <span>02</span>
          <span>微信账号sdghsg</span>
          <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除当前公众号吗？"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
        <div class="card_td">
          <span>03</span>
          <span>微信账号sdghsg</span>
          <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除当前公众号吗？"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
        <div class="card_td">
          <span>04</span>
          <span>微信账号sdghsg</span>
          <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除当前公众号吗？"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
      </div>
    </div>

    <div>
      <AccountCard title="超级密码管理"/>
      <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="70px" class="account_change_pass">
        <el-form-item label="原密码" prop="oldPass">
          <el-input v-model.number="formData.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="formData.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="formData.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <div style="width: 100%">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </div>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import AccountCard from "../account/components/AccountCard"

  export default {
    name: "",
    components: {
      AccountCard
    },
    data() {
      const validateOldPass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('原密码不能为空'));
        }
        callback();
      }
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.formData.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

      const validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        formData: {
          oldPass: '',
          pass: '',
          checkPass: ''
        },
        rules: {
          oldPass: [{validator: validateOldPass, trigger: 'blur'}],
          pass: [{validator: validatePass, trigger: 'blur'}],
          checkPass: [{validator: validateCheckPass, trigger: 'blur'}],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formData);
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeWx() {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .account_wrapper {
    .card_td {
      border-bottom: 1px solid #EEEEEE;
      height: 40px;
      line-height: 40px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      width: 60%;
      margin: 0 auto;
    }

    .account_change_pass {
      width: 50%;
      min-width: 380px;
      margin: 35px auto 0;
    }
  }
</style>